body { background:#000; color:#c0c0c0; font-family:sans-serif; }
a {color:lightblue;}
.wrapper  { position:relative; margin:22px auto; padding:33px 55px; max-width: 600px; text-align:center; color:#c0c0c0; background:rgba(255,255,255,0.1); border:11px solid rgba(0,0,0,0.2); }


/*laoder, modified from https://codepen.io/woodwork/pen/YWjWzo*/
.blob { width: 2rem; height: 2rem; background: rgba(0,0,0,0.50); border-radius: 50%; position: absolute; left: calc(50% - 1rem); top: calc(50% - 1rem); box-shadow: 0 0 1rem rgba(255, 255, 255, 0.10);}
.blob-2 { animation: animate-to-2 4s infinite; }
.blob-3 { animation: animate-to-3 4s infinite; }
.blob-1 { animation: animate-to-1 4s infinite; }
.blob-4 { animation: animate-to-4 4s infinite; }
.blob-0 { animation: animate-to-0 4s infinite; }
.blob-5 { animation: animate-to-5 4s infinite; }

@keyframes animate-to-2 {
    25%, 75% { transform: translateX(-1.5rem) scale(0.75); }
    95% { transform: translateX(0rem) scale(1); }
}

@keyframes animate-to-3 {
    25%, 75% { transform: translateX(1.5rem) scale(0.75); }
    95% { transform: translateX(0rem) scale(1); }
}

@keyframes animate-to-1 {
    25% { transform: translateX(-1.5rem) scale(0.75); }
    50%, 75% { transform: translateX(-4.5rem) scale(0.6); }
    95% { transform: translateX(0rem) scale(1); }
}

@keyframes animate-to-4 {
    25% { transform: translateX(1.5rem) scale(0.75); }
    50%, 75% { transform: translateX(4.5rem) scale(0.6); }
    95% { transform: translateX(0rem) scale(1); }
}

@keyframes animate-to-0 {
    25% { transform: translateX(-1.5rem) scale(0.75); }
    50% { transform: translateX(-4.5rem) scale(0.6); }
    75% { transform: translateX(-7.5rem) scale(0.5); }
    95% { transform: translateX(0rem) scale(1); }
}

@keyframes animate-to-5 {
    25% { transform: translateX(1.5rem) scale(0.75); }
    50% { transform: translateX(4.5rem) scale(0.6); }
    75% { transform: translateX(7.5rem) scale(0.5); }
    95% { transform: translateX(0rem) scale(1); }
}